<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>门诊当天统计</title>
  <link rel="stylesheet" href="../../lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="../../css/public.css" media="all">
</head>
<body>

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <!-- 搜索条件开始 -->
  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
  </fieldset>
  <blockquote class="layui-elem-quote">
    <form class="layui-form" method="post" id="searchFrm">
      <div class="layui-form-item">

        <div class="layui-inline">
          <label class="layui-form-label">选择时间:</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="year" readonly="readonly" placeholder="yyyy">
          </div>
        </div>
        <div class="layui-inline">
          <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">今日门诊:</label>
          <div class="layui-input-inline">
            <input type="text" class="layui-input" id="current" readonly="readonly">
          </div>
          <label style="margin-left: -80px" class="layui-form-label">元</label>
        </div>
      </div>
    </form>
  </blockquote>
  <!-- 搜索条件结束 -->
  <div id="container" style="height: 400px"></div>

</div>
</div>

</body>
<script src="../../js/echarts.min.js" charset="utf-8"></script>
<script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script type="text/javascript">
  layui.use([ 'jquery', 'layer', 'form', 'table','laydate','element'  ], function() {
    var $ = layui.jquery;
    var laydate=layui.laydate;

    laydate.render({
      elem:'#year',

      value:new Date()
    });
    $("#doSearch").click(function(){
      getData();
    });

    function getData(){
      var year=$("#year").val();
      if(year===""){
        year=new Date().getFullYear();
      }
      $.post("/web/finance/currentFinance",{current:year},function(data){
        var total=0;
        $.each(data, function (index, item) {
          total+=Number(item.value);
        });
        $("#current").val(total);


        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
          title : {
            text: '门诊当天统计',
            subtext: '真实有效',
            x:'center'
          },
          tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: 'vertical',
            left: 'left',
            data: data.name
          },
          series : [
            {
              name: '',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:data,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };
        ;
        if (option && typeof option === "object") {
          myChart.setOption(option, true);
        }
      });
    }
    getData();
  })
</script>

</html>